<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" lay-filter="form-data">
			<div class="layui-form-item">
				<label class="layui-form-label">src</label>
				<div class="layui-input-block">
					<input type="hidden" name="id" required lay-verify="required"  autocomplete="off" class="layui-input id">
					<input type="text" name="src" required lay-verify="required" placeholder="请输入图片地址" autocomplete="off" class="layui-input src">
				
				</div>
			</div>
			<!-- 图片上传测试 -->
			<div class="layui-form-item">
			        <label class="layui-form-label required">路径</label>
			        <div class="layui-input-block">
						<button type="button" class="layui-btn" id="test1">
						  <i class="layui-icon">&#xe67c;</i>上传图片
						</button>
			        </div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">background</label>
				<div class="layui-input-inline">
					<input type="text" name="background" required lay-verify="required" placeholder="请输入背景色" autocomplete="off" class="layui-input background">
				</div>
				<div class="layui-form-mid layui-word-aux">(rgb)</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">type</label>
				<div class="layui-input-block">
					<select name="type" lay-verify="required" class="type">
						<option value=""></option>
						<option value="0">轮播图</option>
						<option value="1">秒杀</option>
						<option value="2">团购</option>
						<option value="3">分类</option>
						<option value="4">猜你喜欢</option>
						<option value="5">其他</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">targetUrl</label>
				<div class="layui-input-block">
					<input type="text" name="url" placeholder="请输入目标url" class="layui-input url">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="saveBtn">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'laypage', 'http','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
			upload = layui.upload;

		var http = layui.http;
		
		/**
		 * 测试文件上传
		 */
		var uploadInst = upload.render({
			elem: '#test1' //绑定元素
			,url: 'http://localhost:7777/img/uploadImg' ,//上传接口
			data: {
				url : function() {
					return $(".src").val();
				}
			}
			,done: function(res){
				// 查看地址是：http://47.114.97.182/
			  console.log(res)
			  
			  //赋值到表单input
			  form.val("form-data", { //form-data 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
			    "src": res.data
			  });
			}
			,error: function(){
			  //请求异常回调
			}
		  });
			
			//查询待修改的图片数据
			$.ajax( http.base_url + '/img/get/' + $('.id').val(),{
				dataType:'json',//服务器返回json格式数据
				type:'get',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){
					var img = data.data;
					//赋值到表单input
					form.val("form-data", { //form-data 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
					  "id": img.id // "name": "value"
					  ,"src": img.src
					  ,"background": img.background
					  ,"type": img.type
					  ,"url": img.url
					});
					 
					//刷新表单
					form.render();
				},
				error:function(xhr,type,errorThrown){
					
				}
			});
			
			
			
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                // 关闭弹出层
                layer.close(index);

                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);
				
				//提交编辑
				$.ajax( http.base_url + '/img/edit',{
					data: data.field,
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					ContentType: 'application/json; charset=utf-8',
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						alert(data.msg);
						
						//修改成功后刷新父界面
						window.parent.location.reload();
					},
					error:function(xhr,type,errorThrown){
						
					}
				});
            });

            return false;
        });

    });
	
	

</script>
</body>
</html>